<template>
	<view class="page">
		<u-navbar :autoBack="true" placeholder bgColor="transparent" leftIconSize="40rpx">
			<view slot="center" style="font-size: 40rpx; font-weight: 500">{{levelid}}GP 列表</view>
		</u-navbar>

		<view class="main-content">
			<searchView v-model="keyword" placeholder="输入用户手机号或会员ID" @onSearch="handleSearch" />
			<!-- {{memberList}} -->
			<view class="member-card" v-for="(item, index) in memberList" :key="index">
				<view class="member-header">
					<view class="member-info">
						<text class="member-name">{{ item.nickname }}</text>
						<text class="member-name">{{item.levelname}}</text>
						<text class="member-id">ID:{{ item.id }}</text>
						<text class="member-phone">{{ item.tel }}</text>
					</view>
					<view class="qrcode-box" @tap="handleViewQrcode(item)">
						<image src="/static/img/agent/ercode.png" mode=""></image>
					</view>
				</view>

				<view class="stats-grid">
					<view class="stats-item">
						<text class="stats-label">销售总额</text>
						<text class="stats-value primary">{{ item.sales_amount }}</text>
					</view>
					<view class="stats-item">
						<text class="stats-label">订单总数</text>
						<text class="stats-value">{{ item.order_count }}</text>
					</view>
					<view class="stats-item">
						<text class="stats-label">当前月化</text>
						<text class="stats-value">{{ item.month_rate }}</text>
					</view>
					<view class="stats-item">
						<text class="stats-label">当前余额</text>
						<text class="stats-value">{{ item.money }}</text>
					</view>
				</view>

				<view class="action-grid">
					<view class="action-item" @tap="handleOptions('view', item)">
						<text class="action-text">查看</text>
					</view>
					<view class="action-item">
						<text class="action-text" @tap="handleOptions('transfer', item)">划入</text>
					</view>
					<view class="action-item">
						<text class="action-text" @tap="handleOptions('buy', item)">买单</text>
					</view>

					<view class="action-item" @tap="handleOptions('edit', item)">
						<text class="action-text">编辑</text>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<button class="add-button" @tap="handleOptions('add')">添加会员</button>
		</view>

		<!-- 编辑弹窗 -->
		<CustomPopup :show="editModal" @close="editModal = false">
			<form class="form">
				<input type="text" placeholder="姓名" v-model="editForm.nickname" />
				<input type="number" placeholder="id" maxlength="11" v-model="editForm.id" />
				<input type="number" placeholder="手机号" maxlength="11" v-model="editForm.tel" />
				<input type="pwd" placeholder="密码" v-model="editForm.pwd" />
				<input type="number" placeholder="月化率" v-model="editForm.month_rate" />
			</form>

			<button class="submit-btn" @click="onEditSubmit">编辑会员</button>
		</CustomPopup>


		<!-- 划入弹窗 -->
		<CustomPopup :show="transferModal" @close="transferModal = false">
			<view class="transfer-form">
				<view class="transfer-title">
					<text>当前可划转金额</text>
					<text class="transfer-amount">¥{{pagecontent.money}}</text>
				</view>
				<input type="number" class="transfer-input" placeholder="请输入需要划转的金额" v-model="transferForm.amount" />
				<input type="paypwd" class="transfer-input" placeholder="请输入支付密码" v-model="transferForm.paypwd" />
				<button class="transfer-btn" @click="onTransferSubmit()">立即划入</button>
			</view>
		</CustomPopup>

		<!-- 二维码弹窗 -->
		<CustomPopup :show="qrcodeModal" @close="qrcodeModal = false">
			<view class="qrcode-form">
				<view class="qrcode-image">
					<image src="/static/img/agent/ercode.png" mode=""></image>
				</view>
				<view class="qrcode-info">
					<text class="qrcode-name">王重阳</text>
					<text class="qrcode-id">ID:4352</text>
					<text class="qrcode-phone">13212345678</text>
				</view>
				<button class="qrcode-btn" @click="handleSaveQrcode">
					保存当前会员邀请码
				</button>
			</view>
		</CustomPopup>

		<!-- 买单弹窗 -->
		<CustomPopup :show="buyModal" @close="buyModal = false">
			<view class="buy-form">
				<view class="buy-header">
					<text>当前用户金额</text>
					<text class="amount">¥ {{ buyForm.money }}</text>
				</view>

				<view class="select-box">
					<view class="select-header" @tap="toggleSelect">
						<view>
							<text v-if="selectedDevice.name">{{ selectedDevice.name }}</text>
							<text v-else class="select-placeholder">选择下单产品</text>
							<text class="item-price" v-if="selectedDevice.price">¥ {{ selectedDevice.price }}</text>
						</view>
						<text class="arrow" :class="{ active: showSelect }">▼</text>
					</view>

					<view class="select-options" v-if="showSelect">
						<view class="option-item" v-for="(item, index) in deviceList" :key="index"
							@tap="selectDevice(item)">
							<text>{{ item.name }}</text>
							<text class="item-price">¥ {{ item.price }}</text>
						</view>
					</view>
				</view>

				<view class="item-label">
					<text>安装服务费</text>
					<text class="item-price">¥ {{buyForm.servicePrice}}</text>
				</view>

				<input type="paypwd" class="buy-input" placeholder="请输入支付密码" v-model="buyForm.paypwd" />

				<view class="buy-total">
					<text>订单金额</text>
					<text class="total-amount">¥ {{totalAmount}}</text>
				</view>

				<button class="buy-btn" @click="handleBuySubmit">立即买单</button>
			</view>
		</CustomPopup>

		<!-- 添加会员弹窗 -->
		<CustomPopup :show="addModal" @close="addModal = false">
			<view class="add-form">
				<input type="text" class="add-input" placeholder="输入会员昵称" v-model="addForm.nickname" />
				<input type="number" class="add-input" placeholder="输入会员手机号" maxlength="11" v-model="addForm.tel" />
				<view class="input-wrapper">
					<input type="number" class="add-input" maxlength="11" v-model="addForm.referrerPhone" />
					<view class="placeholder" v-if="!addForm.referrerPhone">
						<text>填写</text>
						<text class="highlight">推荐人</text>
						<text>手机号</text>
					</view>
				</view>
				<input type="password" class="add-input" placeholder="输入密码" v-model="addForm.pwd" />
				<input type="digit" class="add-input" placeholder="填写月利率    默认0.7%" v-model="addForm.month_rate" />
				<button class="add-btn" @click="handleAddSubmit">立即添加</button>
			</view>
		</CustomPopup>
	</view>
</template>

<script>
	import searchView from "./components/search.vue";
	import CustomPopup from "./components/custom-popup.vue";
	var app = getApp();

	export default {
		components: {
			searchView,
			CustomPopup,
		},

		data() {
			return {
				memberList: [{
					nickname: "王重阳",
					id: "4352",
					tel: "13212345678",
					sales_amount: "45678.00",
					order_count: "56",
					month_rate: "1.2%",
					money: "30000",
				}, ],
				editModal: false,
				editForm: {
					nickname: "",
					tel: "",
					pwd: "",
					month_rate: "",
				},
				transferModal: false,
				transferForm: {
					amount: "",
					paypwd: "",
				},
				qrcodeModal: false,
				currentMember: null,
				buyModal: false,
				buyForm: {
					id: '',
					money: 2000,
					paypwd: "",
					servicePrice: 120,
				},
				showSelect: false,
				selectedDevice: {},
				deviceList: [
				],
				addModal: false,
				addForm: {
					nickname: '',
					tel: '',
					referrerPhone: '',
					pwd: '',
					month_rate: ''
				},
				loading: false,
				isload: false,
				pagenum: 1,
				keyword: '',
				nodata: false,
				nomore: false,
				levelid: 0,
				count: 0,
				pagecontent: {}
			};
		},
		onPullDownRefresh: function() {
			this.loadData();
		},
		onReachBottom: function() {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.loadData(true);
			}
		},
		watch: {
			selectedDevice: {
				handler(newVal) {
					if (newVal) {
						this.buyForm.servicePrice = newVal.fee; // 确保 servicePrice 被正确更新
					}
				},
				deep: true, // 确保对象内部变化也能监听到
				immediate: true // 立即执行一次，保证初始值正确
			}
		},
		computed: {
			totalAmount() {
				let total = this.selectedDevice.fee || 0;
				if (this.selectedDevice.price) {
					total += this.selectedDevice.price;
					// this.buyForm.servicePrice = this.selectedDevice.fee
					// alert(this.buyForm.servicePrice)
				}
				return total;
			}
		},
		onLoad(opts) {
			if (opts.levelid) {
				this.levelid = opts.levelid
			}
			this.loadData();
			this.getUser();
			this.getDevice();
		},
		methods: {
			getUser() {
				let that = this
				app.post("ApiMy/getUser", {}, function(data) {
					if (data.status != 1) {
						app.alert(data.msg);
						return;
					} else {
						that.pagecontent = data.data
					}
					console.log(that.pagecontent)
				});
			},
			getDevice(){
				let  that = this;
				app.post("ApiMy/getDevice", {}, function(data) {
					if (data.status != 1) {
						app.alert(data.msg);
						return;
					} else {
						that.deviceList = data.data
						this.buyForm.servicePrice = that.deviceList[0].fee;
					}
					console.log(that.deviceList)
				});
			},
			loadData(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.memberList = [];
				}
				var that = this;
				var pagenum = that.pagenum;
				that.nodata = false;
				that.nomore = false;
				that.loading = true;
				app.post('ApiMy/listUser', {
					pagenum: pagenum,
					keyword: that.keyword,
					levelid: that.levelid
				}, function(res) {
					that.loading = false;
					var data = res.datalist;
					that.count = res.count
					if (pagenum == 1) {
						that.memberList = data;
						if (data.length == 0) {
							that.nodata = true;
						}
						that.loaded();
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							var memberList = that.datalist;
							var newdata = memberList.concat(data);
							that.memberList = newdata;
						}
					}
				});
				// console.log(that.memberList)
			},
			handleSearch(value) {
				this.keyword = value
				console.log("搜索关键字:", value);
				if (!value) {
					return uni.showToast({
						title: "请输入搜索内容",
						icon: "none",
					});
				}
				this.loadData()
				// TODO: 实现搜索逻辑
			},

			handleOptions(type, item) {
				console.log(item)
				switch (type) {
					case "view":
						uni.navigateTo({
							url: `/pages/agent/user?id=${item.id}`,
							fail: (err) => {
								console.error("页面跳转失败:", err);
								uni.showToast({
									title: "页面跳转失败",
									icon: "none",
								});
							},
						});
						break;
					case "edit":
						this.editForm = {
							...item,
							month_rate: item.month_rate.replace("%", ""),
						};

						this.editModal = true;
						break;
					case "transfer":
						this.transferForm = {
							...item,
							month_rate: item.month_rate.replace("%", ""),
						};
						console.log('=====' + this.transferForm)
						this.transferModal = true;
						break;
					case "buy":
						this.buyForm = {
							...item,
						};
						this.buyModal = true;
						break;
					case "add":
						if (this.checkMatch()) {
							//判断是否可以添加
							this.addModal = true;
						} else {
							uni.showModal({
								title: '已达到上限'
							})
						}
						break;
				}
			},
			checkMatch() {
				const validPairs = {
					5: [1], // 等级 5 → 只能是 1 个
					4: [2], // 等级 4 → 只能是 2 个
					3: [9], // 等级 3 → 只能是 9 个
					2: [14], // 等级 2 → 只能是 14 个
					1: [162] // 等级 1 → 只能是 162 或 1
				};
				if (validPairs[this.levelid] && validPairs[this.levelid].includes(this.count)) {
					return false; // 规则匹配，返回 false
				}
				return true; // 不匹配，返回 true
			},
			onEditSubmit() {
				console.log("编辑会员表单:", this.editForm);
				app.post("ApiMy/editUser", {
					...this.editForm
				}, function(data) {
					if (data.status != 1) {
						app.alert(data.msg);
						return;
					} else {
						uni.showToast({
							title: '编辑成功'
						})
						for (let key in this.editForm) {
							this.editForm[key] = '';
						}
					}
				});
				this.editModal = false;
			},
			onTransferSubmit() {
				if (!this.transferForm.amount) {
					return uni.showToast({
						title: "请输入划转金额",
						icon: "none",
					});
				}
				if (!this.transferForm.paypwd) {
					return uni.showToast({
						title: "请输入支付密码",
						icon: "none",
					});
				}
				console.log("划转表单:", this.transferForm);
				let that = this
				app.post("ApiMy/transferUser", {
					...this.transferForm
				}, function(data) {

					if (data.status != 1) {
						app.alert(data.msg);
						return;
					} else {
						uni.showToast({
							title: '划入成功'
						})
						for (let key in this.transferForm) {
							that.transferForm[key] = '';
						}
						that.loadData()
					}
				});
				// TODO: 处理划转逻辑
				console.log("划转表单:", this.transferForm);
				this.transferModal = false;
			},
			handleViewQrcode(item) {
				uni.navigateTo({
					url:'/activity/commission/poster?childid='+item.id
				})
				// this.currentMember = item;
				// this.qrcodeModal = true;
			},
			handleSaveQrcode() {
				// TODO: 实现保存二维码的逻辑
				uni.showToast({
					title: "二维码已保存",
					icon: "success",
				});
			},
			handleBuySubmit() {
				if (!this.selectedDevice.name) {
					return uni.showToast({
						title: '请选择产品',
						icon: 'none'
					});
				}
				if (!this.buyForm.paypwd) {
					return uni.showToast({
						title: '请输入支付密码',
						icon: 'none'
					});
				}
				// if (this.totalAmount > this.buyForm.balance) {
				// 	return uni.showToast({
				// 		title: '余额不足',
				// 		icon: 'none'
				// 	});
				// }
				// const submitData = {
				// 	deviceName: this.selectedDevice.name,
				// 	devicePrice: this.selectedDevice.price,
				// 	servicePrice: this.buyForm.servicePrice,
				// 	totalAmount: this.totalAmount,
				// 	paypwd: this.buyForm.paypwd
				// };
				let freight_id = this.selectedDevice.freightdata;
				let prodata = this.selectedDevice.id+","+"29,"+this.selectedDevice.limit_start;
				
				// "25,29,2";
				// alert(this.selectedDevice.fee)
				if (this.selectedDevice.id == 24) {
					// freight_id = 292;
					prodata = this.selectedDevice.id+","+"28,"+this.selectedDevice.limit_start;
				}
				let mid = this.buyForm.id
				const submitData = {
					frompage: "",
					mid: mid,
					buydata: [{
						bid: 0,
						prodata: prodata,
						cuxiaoid: 0,
						couponrid: "",
						freight_id: freight_id,
						freight_time: "",
						storeid: 0,
						formdata: {},
						type11key: 0
					}],
					addressid: 7,
					linkman: this.buyForm.nickname,
					tel: this.buyForm.tel,
					usescore: 0,
					gtkjifen: 1
				};
				let that = this;
				console.log("提交数据:", JSON.stringify(submitData)); // 确保数据正确
				app.post("ApiShop/createAgentOrder", {
					...submitData
				}, function(data) {
					if (data.status != 1) {
						app.alert(data.msg);
						return;
					} else {

						const requestData = {
							mid: mid,
							op: "submit",
							orderid: data.payorderid,
							typeid: "1",
							paypwd: '123456',
							pay_type: ""
						};
						app.post("ApiPay/agentpay", {
							...requestData
						}, function(data) {
							if (data.status != 1) {
								app.alert(data.msg);
								return;
							} else {

								uni.showToast({
									title: '添加成功'
								})
								that.loadData()
								// for (let key in this.buyForm) {
								// 	this.buyForm[key] = '';
								// }
							}
						});
						// for (let key in this.buyForm) {
						// 	this.buyForm[key] = '';
						// }
					}
				});
				// https://dls.hoeagri.com/ApiShop/createOrder?aid=1&platform=h5&session_id=6e6041c91cb657c137cc7a1527ff3a2e&pid=0

				// TODO: 处理买单逻辑
				console.log('买单表单:', submitData);
				this.buyModal = false;
			},
			toggleSelect() {
				this.showSelect = !this.showSelect;
			},
			selectDevice(item) {
				this.selectedDevice = item;
				this.showSelect = false;
			},
			handleAddSubmit() {
				if (!this.addForm.nickname) {
					return uni.showToast({
						title: '请输入会员昵称',
						icon: 'none'
					});
				}
				if (!this.addForm.tel) {
					return uni.showToast({
						title: '请输入会员手机号',
						icon: 'none'
					});
				}
				if (!this.addForm.pwd) {
					return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
				}
				this.addForm.levelid = this.levelid;
				app.post("ApiMy/addUser", {
					...this.addForm
				}, function(data) {
					if (data.status != 1) {
						app.alert(data.msg);
						return;
					} else {
						uni.showToast({
							title: '添加成功'
						})
						for (let key in this.addForm) {
							this.addForm[key] = '';
						}
					}
				});
				// TODO: 处理添加会员逻辑
				console.log('添加会员表单:', this.addForm);
				this.addModal = false;
			}
		},
	};
</script>

<style lang="less" scoped>
	page {
		height: 100%;
	}

	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.main-content {
		flex: 1;
		padding: 0 32rpx;
		overflow-y: auto;

		.member-card {
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx 32rpx 0;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
			margin-bottom: 30rpx;
		}

		.member-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
		}

		.member-info {
			display: flex;
			align-items: center;
		}

		.member-name {
			font-weight: 500;
			font-size: 35rpx;
			color: #000000;
			margin-right: 29rpx;
		}

		.member-id,
		.member-phone {
			font-size: 26rpx;
			color: #999999;
			margin-right: 32rpx;
			align-self: flex-end;
		}

		.qrcode-box {
			width: 35rpx;
			height: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.stats-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 32rpx;
			margin-bottom: 25rpx;
		}

		.stats-item {
			text-align: left;
			padding-left: 10rpx;
		}

		.stats-value {
			font-weight: 500;
			font-size: 26rpx;
			color: #000000;
		}

		.stats-value.primary {
			color: #007aff;
		}

		.stats-label {
			font-size: 26rpx;
			color: #939393;
			display: block;
			font-weight: 500;
			margin-bottom: 8rpx;
		}

		.action-grid {
			display: flex;
			justify-content: flex-end;
			border-top: 1px solid #f4f4f4;
			padding: 16rpx 0;
		}

		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 31rpx;
		}

		.action-text {
			font-size: 26rpx;
			color: #a5a5a5;
		}
	}

	.footer {
		padding: 32rpx;

		.add-button {
			width: 100%;
			height: 82rpx;
			line-height: 82rpx;
			color: #ffffff;
			font-size: 35rpx;
			font-weight: 500;
			background: #0086ef;
			border-radius: 20rpx;
		}
	}

	.form {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 100rpx;

		input {
			height: 88rpx;
			background: #f5f5f5;
			border-radius: 10rpx;
			padding: 0 20rpx;
			font-size: 14px;
			color: #333;
			margin-bottom: 20rpx;
		}
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: #007aff;
		color: #fff;
		font-size: 16px;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
	}

	.transfer-form {
		.transfer-title {
			font-size: 35rpx;
			color: #333;
			margin-bottom: 40rpx;
			letter-spacing: 2rpx;

			.transfer-amount {
				color: #3686ee;
				margin-left: 26rpx;
			}
		}

		.transfer-input {
			width: 100%;
			height: 88rpx;
			background: #f5f5f5;
			border-radius: 10rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 34rpx;
		}

		.transfer-btn {
			width: 100%;
			height: 88rpx;
			background: #007aff;
			color: #fff;
			font-size: 32rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 150rpx;
		}
	}

	.qrcode-form {
		text-align: center;
		padding: 20rpx 0;

		.qrcode-info {
			background-color: #f5f5f5;
			height: 88rpx;
			line-height: 88rpx;

			.qrcode-name {
				font-size: 35rpx;
				color: #000;
				margin-right: 37rpx;
			}

			.qrcode-id,
			.qrcode-phone {
				font-size: 26rpx;
				color: #999;
				margin-right: 32rpx;
			}
		}

		.qrcode-image {
			width: 400rpx;
			height: 400rpx;
			margin: 0 auto 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.qrcode-btn {
			width: 100%;
			height: 88rpx;
			background: #007aff;
			color: #fff;
			font-size: 32rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 120rpx;
		}
	}

	.buy-form {
		padding: 20rpx 0;

		.buy-header {
			font-size: 35rpx;
			color: #333;
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;

			.amount {
				color: #3686ee;
				margin-left: 26rpx;
			}
		}

		.item-label {
			flex: 1;
			font-size: 35rpx;
			color: #333;
			margin: 30rpx 0 30rpx;

			.item-price {
				color: #3686ee;
				margin-left: 20rpx;
			}
		}

		.select-box {
			position: relative;

			.item-price {
				color: #3686ee;
				margin-left: 20rpx;
			}

			.select-header {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background: #f5f5f5;
				border-radius: 10rpx;
				padding: 0 30rpx;
				font-size: 30rpx;
				color: #333;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.select-placeholder {
					color: gray;
					font-size: 30rpx;
				}

				.arrow {
					transition: transform 0.3s ease;

					&.active {
						transform: rotate(180deg);
					}
				}
			}

			.select-options {
				position: absolute;
				top: 100%;
				left: 0;
				width: 100%;
				background: #fff;
				border-radius: 10rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
				margin-top: 10rpx;
				z-index: 10;

				.option-item {
					height: 88rpx;
					line-height: 88rpx;
					padding: 0 20rpx;
					font-size: 35rpx;
					color: #333;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&:active {
						background: #f5f5f5;
					}
				}
			}
		}

		.buy-input {
			width: 100%;
			height: 88rpx;
			background: #f5f5f5;
			border-radius: 10rpx;
			padding: 0 20rpx;
			font-size: 30rpx;
			color: #a5a5a5;
			box-sizing: border-box;
		}

		.buy-total {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			margin-top: 100rpx;
			padding: 0 10rpx;

			.total-amount {
				font-size: 32rpx;
				color: #3686ee;
				margin-left: 20rpx;
			}
		}

		.buy-btn {
			width: 100%;
			height: 88rpx;
			background: #3686ee;
			color: #fff;
			font-size: 32rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
		}
	}

	.add-form {
		padding: 20rpx 0;

		.input-wrapper {
			position: relative;

			.add-input {
				width: 100%;
				height: 88rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				padding: 0 30rpx;
				font-size: 30rpx;
				color: #333;
				margin-bottom: 20rpx;
				box-sizing: border-box;
			}

			.placeholder {
				position: absolute;
				left: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 30rpx;
				color: gray;
				pointer-events: none;

				.highlight {
					color: #3686EE;
					margin: 0 4rpx;
				}
			}
		}

		.add-input {
			width: 100%;
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			padding: 0 30rpx;
			font-size: 30rpx;
			color: #333;
			margin-bottom: 20rpx;
			box-sizing: border-box;

			&::placeholder {
				color: #A5A5A5;
			}
		}

		.rate-input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			margin-bottom: 10rpx;
			font-size: 30rpx;

			.rate-default {
				color: #3686EE;
			}
		}

		.add-btn {
			width: 100%;
			height: 88rpx;
			background: #3686EE;
			color: #fff;
			font-size: 32rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 100rpx;
		}
	}
</style>